<template>
  <i
    v-if="isFontAwesome"
    :class="['axiom-icon-fa', name]"
    :style="{
      fontSize: typeof size === 'number' ? `${size}px` : size,
      color: color,
    }"
  />
  <el-icon v-else :size="size" :color="color">
    <component :is="iconComponent" />
  </el-icon>
</template>

<script setup>
import { computed } from 'vue';
import { ElIcon } from 'element-plus';
import {
  HomeFilled,
  Grid,
  Coin,
  User,
  Avatar,
  Lock,
  Setting,
  Menu,
  Open,
  TurnOff,
  ArrowLeft,
  ArrowRight,
  Link,
  Search,
  Filter,
  Loading,
  Monitor,
  Sunny,
  Moon,
  MessageBox,
  Close,
  Operation,
  Plus,
  Minus,
  Edit,
  Delete,
  View,
  Refresh,
  ArrowLeftBold,
  ArrowRightBold,
  ArrowUpBold,
  ArrowDownBold,
  Upload,
  Download,
  Check,
  MoreFilled,
  InfoFilled,
  WarningFilled,
  CircleCheckFilled,
  CircleCloseFilled,
  ElementPlus,
  Star,
  StarFilled,
  // Batch add common icons
  Clock,
  Cpu,
  Sort,
  Promotion,
  Document,
  DataAnalysis,
  DataLine,
  Tickets,
  TrendCharts,
  Compass,
  Connection,
  Guide,
  Key,
  PriceTag,
  Service,
  Share,
  Files,
  Folder,
  FolderOpened,
  Wallet,
} from '@element-plus/icons-vue';

const iconComponents = {
  HomeFilled,
  Grid,
  Coin,
  User,
  Avatar,
  Lock,
  Setting,
  Menu,
  Open,
  TurnOff,
  ArrowLeft,
  ArrowRight,
  Link,
  Search,
  Filter,
  Loading,
  Monitor,
  Sunny,
  Moon,
  MessageBox,
  Close,
  Operation,
  Plus,
  Minus,
  Edit,
  Delete,
  View,
  Refresh,
  ArrowLeftBold,
  ArrowRightBold,
  ArrowUpBold,
  ArrowDownBold,
  Upload,
  Download,
  Check,
  MoreFilled,
  InfoFilled,
  WarningFilled,
  CircleCheckFilled,
  CircleCloseFilled,
  ElementPlus,
  Star,
  StarFilled,
  // Batch add common icons
  Clock,
  Cpu,
  Sort,
  Promotion,
  Document,
  DataAnalysis,
  DataLine,
  Tickets,
  TrendCharts,
  Compass,
  Connection,
  Guide,
  Key,
  PriceTag,
  Service,
  Share,
  Files,
  Folder,
  FolderOpened,
  Wallet,
};

const iconAliasMap = {
  logo: 'ElementPlus',
  home: 'HomeFilled',
  apps: 'Grid',
  database: 'Coin',
  user: 'User',
  role: 'Avatar',
  permission: 'Lock',
  settings: 'Setting',
  menu: 'Menu',
  'toggle-on': 'Open',
  'toggle-off': 'TurnOff',
  'sidebar-on': 'ArrowLeft',
  'sidebar-off': 'ArrowRight',
  'external-link': 'Link',
  search: 'Search',
  filter: 'Filter',
  spinner: 'Loading',
  laptop: 'Monitor',
  sun: 'Sunny',
  moon: 'Moon',
  inbox: 'MessageBox',
  times: 'Close',
  'fas-fa-bars': 'Operation',
  plus: 'Plus',
  minus: 'Minus',
  edit: 'Edit',
  delete: 'Delete',
  view: 'View',
  refresh: 'Refresh',
  'arrow-left': 'ArrowLeftBold',
  'arrow-right': 'ArrowRightBold',
  'arrow-up': 'ArrowUpBold',
  'arrow-down': 'ArrowDownBold',
  upload: 'Upload',
  'upload-cloud': 'Upload', // Add alias for document uploader
  download: 'Download',
  check: 'Check',
  'more-filled': 'MoreFilled',
  'info-filled': 'InfoFilled',
  'warning-filled': 'WarningFilled',
  'circle-check-filled': 'CircleCheckFilled',
  'circle-close-filled': 'CircleCloseFilled',
  // AxiomNotification icons - Map abstract names to specific filled components
  'check-circle': 'CircleCheckFilled',
  'exclamation-triangle': 'WarningFilled',
  'info-circle': 'InfoFilled',
  'times-circle': 'CircleCloseFilled',
  star: 'Star',
  file: 'File',
  // Add aliases for the new batch of icons
  clock: 'Clock',
  cpu: 'Cpu',
  sort: 'Sort',
  promotion: 'Promotion',
  document: 'Document',
  'data-analysis': 'DataAnalysis',
  'data-line': 'DataLine',
  tickets: 'Tickets',
  'trend-charts': 'TrendCharts',
  compass: 'Compass',
  connection: 'Connection',
  guide: 'Guide',
  key: 'Key',
  'price-tag': 'PriceTag',
  service: 'Service',
  share: 'Share',
  files: 'Files',
  folder: 'Folder',
  'folder-opened': 'FolderOpened',
  wallet: 'Wallet',
};

defineOptions({
  name: 'AxiomIcon'
});

const props = defineProps({
  name: {
    type: String,
    required: true,
  },
  size: {
    type: [String, Number],
    default: 16,
  },
  color: {
    type: String,
    default: 'inherit',
  },
});

const toPascalCase = (str) => {
  if (!str) return '';
  return str.replace(/(^\w|-\w)/g, (c) => c.replace('-', '').toUpperCase());
};

const isFontAwesome = computed(() => props.name?.startsWith('fa'));

const iconComponent = computed(() => {
  if (!props.name || isFontAwesome.value) return null;

  const lookupKey = props.name.toLowerCase();
  const aliasedName = iconAliasMap[lookupKey] || toPascalCase(props.name);
  return iconComponents[aliasedName] || null;
});
</script>

<style scoped>
.axiom-icon-fa {
  vertical-align: -0.15em;
  fill: currentColor;
  overflow: hidden;
}
</style> 